<template>
  <div>
    <!-- 高层领导 可见 -->
    <div class="title">人员到岗情况</div>
    <div class="person shadow">
      <el-date-picker v-model="queryParams.day" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" @change="getList"></el-date-picker>
      <div class="list">
        <div class="box" :style="{ 'background-color': bgColors[index] }" v-for="(item, index) in dataList" :key="index" @click="handleClick(item)">
          <div class="key">{{item.name||item.label}}</div>
          <div class="value">{{item.value||0}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getCountByDay } from "@/api/home";
// ,{field: "punchInLoseCardNum", label: '上班未打卡'},{field: "clockInLoseCardNum", label: '下班未打卡'}
const fields = [{field: "memberCount", label: '全部人数'}, {field: "clockInCount", label: '上班打卡人数'},{field: "clockOutCount", label: '下班打卡人数'}, {field: "lateClockInCount", label: '迟到'}, {field: "leaveCount", label: '请假'}, {field: "rate", label: '到岗率'}]
export default {
  data() {
    return {
      queryParams: {},
      dataList: fields,
      bgColors: [
        "#81D1F6",
        "#FED67B",
        "#ACC9A9",
        "#F68181",
        "#F6D0A6",
        "#A9B6C9",
      ],
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      try {
        const res = await getCountByDay(this.queryParams);
        const _list = []
        fields.forEach((item,index) => {
          let value = res.data && res.data[item.field] || '0'
          if(item.field == 'rate') {
            if(!res.data['clockInCount'] || !res.data['memberCount']) {
                value = '0%'
            }else{
                value = (res.data['clockInCount'] / res.data['memberCount'] * 100).toFixed(2) + '%'
            }
          }
          _list.push({
            name: item.label,
            value: value,
            color: this.bgColors[index]
          })
        })

        this.dataList = _list;
      } catch (error) {
        console.log('error', error)
      }
    },
    handleClick(item) {
      this.$emit('handleClick', {...item, day: this.queryParams.day})
    }
  },
};
</script>
<style lang="scss" scoped>
.person {
  margin: 15px 0;
  padding: 20px;
  .list {
    //height: 300px;
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    color: #ffffff;
    .box {
      height: 86px;
      background: #81d1f6;
      border-radius: 6px;
      padding: 20px;
      box-sizing: border-box;
      .key {
        font-size: 14px;
      }
      .value {
        font-size: 24px;
      }
    }
  }
}
</style>
